import { useState ,useEffect} from "react";
import { Button, NavBar, Radio, Input } from "antd-mobile";
import styles from "./Index.module.css";
import { useNavigate } from "react-router-dom";
import instance from "../../api/request";

function Index() {
  const nav = useNavigate();
  const [money, setMoney] = useState(1);
  const [payType] = useState("1");

  useEffect(() => {
    if (payType) {
      instance
        .post("/user/verify/v1/recharge", null, {
          params: {
            money: money,
            payType: payType,
          },
        })
        .then((res) => {
          console.log(res, "====充值");
        });
    }
  }, [money, payType]);

  return (
    <div className={styles.chongq}>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)} style={{ marginTop: "10px" }}>
          充值
        </NavBar>
      </div>

      <div className={styles.footer}>
        <div className={styles.zi}>充值金额</div>

         <div className={styles.moneys}>
           <div style={{ fontSize: "80px" }}>￥</div>
           <div style={{ fontSize: "80px", color: "blue"}}>
             <Input
               value={money}
               onChange={setMoney}
               className={styles.moneyInput}
               placeholder="0"
             />
           </div>
           <div style={{ marginLeft: "20px", color: "gray", fontSize: "14px", display: "flex", alignItems: "center" }}>
             本次可以获得<span style={{ color: "red" }}>{money * 100}</span>H币
           </div>
         </div>

        <div className={styles.xiaoz} style={{ color: "gray" }}>
          最低充值1元,一元可兑换100H币
        </div>

        <div className={styles.zhifu}>
          <div style={{ fontSize: "20px", marginLeft: "20px" }}>
            选择充值方式
          </div>
          <div>
            <img
              style={{ marginLeft: "20px", marginTop: "10px" }}
              src="/wechat.png"
              alt=""
            />{" "}
            <Radio style={{ marginLeft: "280px" }} />
          </div>
          <div>
            <img
              style={{ marginLeft: "20px", marginTop: "10px" }}
              src="/zhif.png"
              alt=""
            />{" "}
            <Radio style={{ marginLeft: "280px" }} />
          </div>
        </div>

        <div className={styles.btn}>
          <Button block color="primary" size="large">
            充值
          </Button>
        </div>
      </div>



    </div>
  );
}

export default Index;
